<!DOCTYPE html>
<html class="ui-page-login">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <script src="__PUBLIC__/js/jquery.min.js"></script>
    <script src="__PUBLIC__/home/plugins/layer/layer.js"></script>
    <script src="__PUBLIC__/mui/js/mui.min.js"></script>
    <script src="__PUBLIC__/js/angular.js"></script>
    <script src="__PUBLIC__/common.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/mui/css/mui.css"/>
    <link rel="stylesheet" href="__PUBLIC__/css/shijianzhou.css">
    <style>
        #member-login {
            display: none;
        }

        .area {
            margin: 20px auto 0px auto;
        }

        .mui-input-group {
            margin-top: 10px;
        }

        .mui-input-group:first-child {
            margin-top: 20px;
        }

        .mui-input-row label ~ input,
        .mui-input-row label ~ select,
        .mui-input-row label ~ textarea {
            width: 70%;
        }

        .mui-checkbox input[type=checkbox],
        .mui-radio input[type=radio] {
            top: 6px;
        }

        .mui-content-padded {
            margin-top: 25px;
        }

        .mui-btn {
            padding: 10px;
        }

        .link-area {
            display: block;
            margin-top: 25px;
            text-align: center;
        }

        .spliter {
            color: #bbb;
            padding: 0px 8px;
        }

        .oauth-area {
            position: absolute;
            bottom: 20px;
            left: 0px;
            text-align: center;
            width: 100%;
            padding: 0px;
            margin: 0px;
        }

        .oauth-area .oauth-btn {
            display: inline-block;
            width: 50px;
            height: 50px;
            background-size: 30px 30px;
            background-position: center center;
            background-repeat: no-repeat;
            margin: 0px 20px;
            /*-webkit-filter: grayscale(100%); */
            border: solid 1px #ddd;
            border-radius: 25px;
        }

        .oauth-area .oauth-btn:active {
            border: solid 1px #aaa;
        }

        .oauth-area .oauth-btn.disabled {
            background-color: #ddd;
        }

        .login-active {
            background: #f3363a;
        }

        .mui-input-group label {
            width: 45%;
            font-size: 15px;
            color: black;

        }

        .content {
            width: 55%;
            float: right;
            line-height: 40px;
            height: 40px;
            text-indent: 2em;
            font-size: 15px;
            text-align: right;
            padding-right: 1em;

        }

        .go-item {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 0;
            margin: 0;
            background: white;
            height: 60px;
            text-align: center;

        }

        #user-login .mui-input-row .time {
            width: 65%;
            color: black;
        }

        #user-login .mui-input-row .status {
            width: 35%;
            font-size: 14px;
            font-weight: bold;
            font-family: "Microsoft YaHei UI Light";

        }

        .mui-input-group .mui-input-row:nth-child(1) {
            border-top: 1px solid #c8c7cc;
        }

        .mui-input-group .mui-input-row:after {
            left: 0;
        }

        .mui-input-group .mui-input-row:nth-child(1):after {
            background: none;
        }

        .mui-input-group .mui-input-row:last-child:after {
            background: none;
        }

        #user-login .mui-input-group {
            margin-top: 0;
        }

        #withdraw {
            color: white;
            font-size: 16px;
            line-height: 44px;
            margin: 0;
            padding: 0;
            height: 44px;
        }

        #user-login .mui-input-group {
            background: #f6f6f6
        }

    </style>
    <link rel="stylesheet" href="__PUBLIC__/js/nice-validator-0.10.11/dist/jquery.validator.css"/>
    <script src="__PUBLIC__/js/nice-validator-0.10.11/dist/jquery.validator.js"></script>
    <script src="__PUBLIC__/js/nice-validator-0.10.11/dist/local/zh-CN.js"></script>
</head>
<body ng-app="myApp" ng-controller="Ctrl" ng-cloak>
<header class="mui-bar mui-bar-nav" style="background:#f3363a">
    <a class="mui-icon mui-icon-left-nav mui-pull-left" style="color: white"
       href="/index.php/Home/agen/orderlist?flg=2"></a>
    <h1 class="mui-title login-item" style="color: white">订单发货,扫码追溯</h1>
  <!--  <a class="mui-icon mui-icon-spinner mui-spin mui-pull-right"  style="color: white;" ></a>-->
    <a class="scan_w" ng-show="boxs-compnum>0" ng-click="saoyisao()"></a>
    <!--<h1 class="login-item mui-pull-right" style="color: white;font-size: 14px;" ng-show="boxs-compnum>0"
        ng-click="saoyisao()">扫一扫</h1>-->
</header>
<style>
    .scan_w{
        background: url(/Public/images/tracert_btn_scan.png) no-repeat;
        background-size: 66%;
        width: 30px;
        height: 30px;
        position: absolute;
        top: 13px;
        right: 8px;
    }
</style>
<style>
    .cart-total {
        background: white;
    }

    .money-all {
        width: 70%;
        float: left;
        line-height: 50px;
        height: 50px;
        font-size: 16px;
        color: #333333;
        text-indent: 1em;
    }

    .go-deal {
        background: #f2373b;
        color: white;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
    }
</style>
<div class="mui-content" style="margin-bottom: 50px">
    <div class="mui-input-group" style="margin-top: 3px">
        <div class="mui-input-row" style="background-color: lightgray;">
            <label class="time">{{order.updatetime}}</label>
            <div class="content  " style="color: #f2373b">
                总额：<span style="color:#ff6769">￥{{order.total}}</span>
            </div>
        </div>

        <div class="mui-input-row" style="background:white">
            <label class="time">订单号:{{order.sn}}</label>
            <div class="content  " style="color: #f2373b" ng-show="order.status==2">
                未发货
            </div>
            <div class="content  " style="color: #f2373b" ng-show="order.status==3">
                已发货
            </div>
            <div class="content  " style="color: #f2373b" ng-show="order.status==4">
                已完成
            </div>
        </div>
        <div class="mui-input-row" style="background:white">
            <label class="time">商品</label>
            <div class="content  " style="color: #f2373b">
                {{order.name}}
            </div>
        </div>
        <div class="mui-input-row" style="background:white">
            <label class="time">数量</label>
            <div class="content  " style="color: #f2373b">
                {{boxs}}箱{{order.num%order.boxnum}}盒
            </div>
        </div>
    </div>

    <div class="mui-input-group" style="margin-top: 3px" ng-show="trac!=null" ng-repeat="trac in tracinfo">
        <div class="mui-input-row" style="background-color: lightgray;">
            <!--<div class="content  " style="color: #f2373b">-->
            <!--<span style="color:black" >{{sy.createtime}}</span>-->
            <!--</div>-->
            <label class="time" style="color:red">{{trac.sn}}</label>
        </div>
        <div style=" background-color: white">
            <div ng-repeat="acc in trac.flowlist.slice().reverse()">
                <div class="vertbar"></div>
                <div class='nearsite-message' style="width: 100%;">
                    <div class='avatar'>
                        <div class="gray"></div>
                    </div>
                    <div class='content1' style="border-bottom: 1px solid #b3b2b2;    width: 85%;">
                        <div class='triangle'></div>
                        <span ng-show="acc==agenacc" style="color:red">{{acc}}</span>
                        <span ng-show="acc!=agenacc">{{acc}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="cart-total" style="position: fixed;bottom: 0px;width: 100%">
    <ul class="mui-table-view">
        <li class=" mui-media " style="width: 100%">
            <div class="mui-media-body  do-cart" style="display: flex;height: 60px" ng-show="boxs-compnum>0">
                <p class="money-all" style="width: 70%;height: 60px;line-height: 60px">需扫描:<span style="color: red;">{{boxs-compnum}}箱</span>
                </p>
                <p class="go-deal ungo-deal" style="width: 30%;height: 60px;line-height: 60px" disabled>请扫码</p>
            </div>
            <div class="mui-media-body  do-cart" style="display: flex;height: 60px" ng-show="boxs-compnum==0">
                <p class="money-all" style="width: 70%;height: 60px;line-height: 60px">扫描完成！</span></p>
                <p class="go-deal ungo-deal" style="width: 30%;height: 60px;line-height: 60px"
                   ng-click="send(order.id)">确认发货</p>
            </div>
        </li>
    </ul>
</div>
<!--<include file="./Application/Home/View/Public/agentfoot.html" />-->
<script>
    var app = angular.module("myApp", []);
    app.controller('Ctrl', function ($scope, $http) {
        $scope.tracing = getUrlParam('tracing');
        if ($scope.tracing == '' || $scope.tracing == null || $scope.tracing == 'undefind') {
            $http({
                method: 'GET',
                url: "/index.php/Home/AgentOnlineorder/seltracing?id=" + getUrlParam('id')
            }).then(function successCallback(response) {
                //console.log(response.data);
                $scope.order = response.data.data.order;
                $scope.compnum = response.data.data.compnum;
                $scope.agenacc = response.data.data.agenacc;
                $scope.boxs = Math.floor(response.data.data.order.num / response.data.data.order.boxnum);
                //console.log($scope.boxs);
            }, function errorCallback(response) {
            });
        } else {
            $http({
                method: 'POST',
                data: {'tracingsn': $scope.tracing, 'id': getUrlParam('id')},
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                transformRequest: function (obj) {
                    var str = [];
                    for (var p in obj) {
                        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                    }
                    return str.join("&");
                },
                url: "/index.php/Home/AgentOnlineorder/addtracing"
            }).then(function successCallback(response) {
                //console.log(response.data.data);
                if (response.data.code == -1) {
                    layer.msg(response.data.msg, {time: 1500})
                    setTimeout(function () {
                        window.location.href="/index.php/Home/agen/orderlist?flg=2"
                    }, 1500)
                } else {
                    layer.msg(response.data.data.msg, {time: 1000});
                    $scope.compnum = response.data.data.sel.compnum;
                    $scope.order = response.data.data.sel.order;
                    $scope.agenacc = response.data.data.sel.agenacc;
                    $scope.boxs = Math.floor(response.data.data.sel.order.num / response.data.data.sel.order.boxnum);
                    if ($scope.compnum > 0) {
                        $scope.tracinfo = response.data.data.tracinfo;
                    }
                }
            }, function errorCallback(response) {
                errorHandle(response);
            });
        }


        //扫溯源码
        $scope.saoyisao = function () {
            window.location.href = "/index.php/home/agen/sample";
        }

        // 发货
        $scope.send = function (id) {
            window.location.href = "/index.php/home/agen/sendgoods?id=" + id + "&flg=agen";
        }
    });

</script>
</body>
</html>